<style>
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {
	padding: 5px;
	line-height:1.42857143;
	vertical-align:top;
	border-top:1px solid #ddd;
}
.closebtn {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -30px;
    right: -10px;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
	font-size:24px;
    color: #fff;
}
.goods-list-table .goods-list-item a{
	width: 138px;
	height: 88px;
    color: #fff;
    text-decoration: none;
}
.goods-list-table .goods-list-op .fa-edit{
    color: #5cb85c
}
.goods-list-table .goods-list-op .fa-trash-o{
    color: #d9534f
}
.goods-list-table .goods-list-num{
    font-size:12px;
	text-align:left;
}
.goods-list-table .goods-list-title{
	height:45px;
	line-height:45px;
    font-size:22px;
}
.goods-list-table .goods-list-title:hover{
	color: #f60;
}
.goods-list-table .goods-list-item {
	-webkit-border-radius: 4px;
	background-color:#28B5D6;
    width: 138px;
	height: 88px;
	margin: 0 10px 10px 0;
    padding: 5px;
}
.goods-list-table .goods-list-item {
        float: left;
        /*! width: 200px; */
        margin: 0px 10px 10px 0;
        text-align: center;
        color: #555555
}
.margin0 {
	margin:0px
}
/* 分割线 */
.fui-line {height: auto; display: block; position: relative; background: inherit;}
.fui-line:before {content: " "; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #d5d5d5;}
.fui-line .text {height: 100%; width: auto; margin: auto; background: inherit; font-size: 22px; display: table; position: relative; padding: 0.4rem 0.3rem; }
.fui-line .text.big { font-size:0.8rem}
.fui-line .text.large { font-size:1rem}
.yuyue-duan {border: 1px solid #19b955;border-radius: 4px;padding:0.1rem;height:auto;width:90px;margin:8px;font-size:12px;text-align:center}
.yuyue-duan span {width:100%;text-align:center}
.timeischack{background:#19b955;color:#fff}
.clear{clear:both;}
.fui-footer.quick {
    background: #474749;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    z-index: 30;
}
.fui-footer.quick .quick-cart {
    width: 3.6rem;
    position: relative;
}
.fui-footer.quick .quick-cart.an {
    animation: cartan 0.5s;
}
.fui-footer.quick .quick-info {
    width: 100%;
    padding: 0.3rem 0.4rem;
    line-height: 0.8rem;
    font-size: 12px;
    color: #fff;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.fui-footer.quick .quick-info .price {
    font-size: 16px;
    line-height: 16px;
}
.fui-footer.quick .quick-submit {
	min-width:140px;
	text-align:center;
    height: 50px;
    padding: 0 1.2rem;
    line-height: 2.5rem;
    background: #ff9d55;
    color: #fff;
    display: inline-block;
}
.fui-footer.quick .quick-submit.disabled {
    background: #5c5c5f;
}
/* 数量选择器 */
.quick-num {
    height: 22px;
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.quick-num.open .minus {
    -moz-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
}
.quick-num.open .num {
    -moz-transition-duration: 300ms;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    opacity: 1;
}
.quick-num.close .minus {
    animation: closeminus 0.2s;
    animation-fill-mode : forwards;
}
.quick-num.close .num {
    -moz-transition-duration: 100ms;
    -webkit-transition-duration: 100ms;
    transition-duration: 100ms;
    opacity: 0;
}
.quick-num .minus,
.quick-num .plus {
    height: 24px;
    width: 24px;
    line-height: 22px;
    font-size: 24px;
    text-align: center;
    border-radius: 100%;
}
.quick-num .minus {
    color: #ff5555;
    border: 1px solid #ff5555;
    -webkit-transform: translate3d(200%, 0, 0) rotate(90deg);
    transform: translate3d(200%, 0, 0) rotate(90deg);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    background: #fff;
    opacity: 0;
    position: relative;
    z-index: 8;
}
.quick-num .minus.disabled {
    color: #dadada;
    border-color: #dadada;
}
.quick-num .plus {
    background: #ff5555;
    color: #fff;
    position: relative;
    z-index: 11;
}
.quick-num .plus.disabled {
    background: #dadada;
}
.quick-num .num {
    height: 24px;
    line-height: 24px;
    font-size: 17px;
    min-width: 24px;
    padding: 0 4px;
    text-align: center;
    color: #777;
    opacity: 0;
}
</style>
<div class="panel-body">
		<div class="alert alert-warning">
			显示当前所有餐桌状态，当前订单状态，用餐情况等。<br>
		</div>
		<ul class="nav nav-tabs" ng-if="pagedata.groups">
				<li ng-repeat="tab in pagedata.groups" ng-class="{'active':pagedata.params.group_id==tab.id}"><a href="javascript:;" ng-click="access_json('main','group_id='+tab.id)">{{tab.title}}</a></li>
		</ul>
		<div class="col-lg-8">
        <div class="panel panel-default">
            <div class="panel-heading">
                请选择商品
            </div>
            <div class="table-responsive panel-body">
                    <div class="goods-list-table">
                        <div class="goods-list-item" ng-repeat="item in pagedata.list">
                            <a ng-show="item.isoption !=1"  href="javascript:" ng-click="addfoot(item,-1);" id="dishid_{{item.id}}" dishid="{{item.id}}">
								<div class="goods-list-num">{{item.id}}</div>
								<div class="goods-list-title" style="overflow: hidden;">
									<span>{{item.title}}</span>
								</div>
								<div class="goods-list-price" style="overflow: hidden;">
									<span class="l">￥{{item.price}}</span>
									<span class="r"><i class="fa fa-plus"></i></span>
								</div>
                            </a>
							<a ng-show="item.isoption == 1" href="javascript:" onclick="$('#selecttaocan').modal();" ng-click="pagedata.g=item;pagedata.post.packageid=0">
								<div class="goods-list-num">{{item.id}}</div>
								<div class="goods-list-title" style="overflow: hidden;">
									<span>{{item.title}}</span>
								</div>
								<div class="goods-list-price" style="overflow: hidden;">
									<span class="l">￥{{item.price}}</span>
									<span  class="r">选规格</span>
								</div>
                            </a>
                        </div>
                        <div class="space"></div>
                    </div>
            </div>
        </div>
    </div>
	<div class="col-lg-4">
        <style>
            .i-add-btn{
                width:20px;  line-height:20px; text-align:center; border-radius:10px;  font-size:10px;
                background-color:#FE4F4E;
                color: #fff;
            }
            .i-remove-btn{
                border: 1px solid #a7a2a9; width:20px;   line-height:20px; text-align:center;
                border-radius:10px; font-size:10px
            }
        </style>
        <div class="panel panel-default" style="width: 100%;">
            <div class="panel-heading">
                订单信息 <a class="btn btn-warning btn-sm clear-btn" href="javascript:" ng-click="unsetcarts();">清空购物车</a>
            </div>
            <div class="table-responsive panel-body">
                <div class="table table-hover text-center" id="native-scroll" style="min-width:100%;">
                    <div class="row" style="margin:5px;font-size:16px;color:#f60"><span class="col-sm-5">菜品名称</span><span class="col-sm-2">数量</span><span class="col-sm-2">单价</span><span class="col-sm-3">操作</span></div>
					<div class="row" ng-repeat="(key,item) in pagedata.carts">
						<div ng-if="!item.package">
						<span class="col-sm-5">{{item.goodstitle}}</span>
						<span class="col-sm-2 total">{{item.num}}</span>
						<span class="col-sm-2">¥<font>{{item.goodsprice}}</font></span>
						<span class="col-sm-3"><a href="javascript:" ng-click="plusup2(key,item,-1);"><i class="i-add-btn fa fa-plus" ></i></a> {{item.num}} <a href="javascript:" ng-click="minusup2(key,item,-1);"><i class="i-remove-btn fa fa-minus"></i></a></span>
						</div>
						<div ng-repeat="(k,v) in item.package">
						<span class="col-sm-5">{{item.goodstitle}}-[{{v.title}}]</span>
						<span class="col-sm-2 total">{{v.num}}</span>
						<span class="col-sm-2">¥<font>{{v.price}}</font></span>
						<span class="col-sm-3"><a href="javascript:" ng-click="plusup2(key,item,k);"><i class="i-add-btn fa fa-plus" ></i></a> {{v.num}} <a href="javascript:" ng-click="minusup2(key,item,k);"><i class="i-remove-btn fa fa-minus"></i></a></span>
						</div>
					</div>
                </div>
            </div>
            <div class="panel-footer">
                <h5>商品价格:<strong class="text-danger" id="goodsprice">{{pagedata.allprice}}</strong></h5>
            </div>
        </div>
        <form action="" method="post" class="form-horizontal form" enctype="multipart/form-data" id="form1">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row-fluid">
                        <div class="span3 control-group">
                            用户信息
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 col-md-2 col-lg-4 control-label">订单类型</label>
                        <div class="col-sm-10 col-lg-6">
                            <select ng-show="pagedata.order_type==1" class="form-control">
                                <option value="0" >店内</option>
							</select>
							 <select ng-show="pagedata.order_type==2" class="form-control">
								<option value="0" >外卖</option>
							 </select>
							 <select ng-show="pagedata.order_type==3" class="form-control">
								<option value="0" >自取</option>
							 </select>
							 <select ng-show="pagedata.order_type==5" class="form-control">
								<option value="0" >预订</option>
							 </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 col-md-2 col-lg-4 control-label">支付方式</label>
                        <div class="col-sm-10 col-lg-6">
                            <select class="form-control" name="paytype" id="paytype" ng-model="pagedata.post.paytype" autocomplete="off">
                                <option value="0" >现金付款</option>
                                <option value="1" >pos刷卡</option>
                                <option value="2" >挂帐</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 col-md-2 col-lg-4 control-label">支付状态</label>
                        <div class="col-sm-10 col-lg-6">
                            <select class="form-control" name="is_pay" id="is_pay" ng-model="pagedata.post.is_pay" autocomplete="off">
                                <option value="0" >未支付</option>
                                <option value="1" >已支付</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-2 col-md-2 col-lg-4 control-label">
                            用户名</label>
                        <div class="col-sm-10 col-lg-6">
                            <input type="text" name="username" ng-model="pagedata.post.username" class="form-control" value="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-2 col-md-2 col-lg-4 control-label">
                            手机号码</label>
                        <div class="col-sm-10 col-lg-6">
                            <input type="text" name="mobile" ng-model="pagedata.post.mobile" class="form-control" value="" />
                        </div>
                    </div>
                    <div class="form-group" ng-if="pagedata.order_type==2">
                        <label class="col-xs-12 col-sm-2 col-md-2 col-lg-4 control-label">
                            收餐地址</label>
                        <div class="col-sm-10 col-lg-6">
                            <input type="text" name="address" ng-model="pagedata.post.address" class="form-control" value="" />
                        </div>
                    </div>
					<div class="form-group" ng-if="pagedata.order_type==2">
						<label class="col-xs-12 col-sm-2 col-md-2 col-lg-4 control-label">配送时间</label>
						<div class="col-sm-10 col-lg-6"><input type="text" name="out_time" onchange="window.scope.pagedata.post.out_time=$(this).val()" ng-model="pagedata.post.out_time" placeholder="请选择日期时间" readonly="readonly" class="datetimepicker form-control" style="padding-left:12px;" /></div>
						<script type="text/javascript">
						require(["datetimepicker"], function(){
							$(function(){
									var option = {
										lang : "zh",
										step : 5,
										timepicker : true,
										closeOnDateSelect : true,
										format : "Y-m-d H:i"
									};
								$(".datetimepicker[name = 'out_time']").datetimepicker(option);
							});
						});
						</script>
					</div>
                    <div class="form-group" ng-if="pagedata.order_type==1">
                        <label class="col-xs-12 col-sm-2 col-md-2 col-lg-4 control-label">
                            人数</label>
                        <div class="col-sm-10 col-lg-6">
                            <a href="javascript:" ng-click="plususer_num();"><i class="i-add-btn fa fa-plus" ></i></a> {{pagedata.post.user_num}} <a href="javascript:" ng-click="minsuser_num();"><i class="i-remove-btn fa fa-minus"></i></a>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-2 col-md-2 col-lg-4 control-label">
                            备注</label>
                        <div class="col-sm-10 col-lg-6">
                            <textarea name="remark" id="remark" style="height:80px;" ng-model="pagedata.post.remark" class="form-control">{{pagedata.post.remark}}</textarea>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <h5 id="totalprice">订单总价:<strong class="text-danger">{{pagedata.orderprice}}</strong></h5>
                </div>
            </div>
        </form>
        <div class="form-group col-sm-11" style="padding-left: 0px;">
            <a  class="btn btn-primary col-lg-8" href="javascript:;" ng-click="post(pagedata.post,'addorder')">保存订单</a>
        </div>

    </div>
</div>
	<div id="selecttaocan" class="modal fade" tabindex="-1" style="z-index: 99999; display: none;">
					<div class="modal-dialog">
						<div class="modal-content" style="border-radius: 4px;">
								<div aria-hidden="true" data-dismiss="modal" class="closebtn"><i class="fa fa-times-circle-o"></i></div>
								<div class="fui-line" style="width:6rem;margin:0.5rem auto 0 auto">
									<div class="text text-danger" style="background-color:#fff" >{{pagedata.g.title}}</div>
								</div>
								<div class="row margin0">
									<div class="col-lg-4" ng-repeat="row in pagedata.g.package">
											<div ng-class="{'yuyue-duan':1,'timeischack':pagedata.post.packageid == $index}" style="width:auto" ng-click="pagedata.post.packageid=$index;">
												<div>{{row.title}}</div>
												<div class="clear"></div>
											</div>
									</div>
								</div>
								<div class="row margin0" style="padding-top:16px">
								<div ng-repeat="up in pagedata.g.package">
								<div class="fui-footer quick" style="height:32px;" ng-show="pagedata.post.packageid == $index">
										<div class="quick-info" style="background:#ff5555;height:32px">
											<p class="price" style="font-size:0.8rem;line-height:24px">￥{{up.price || 0}}.00/份</p>
										</div>
										<div ng-show="up.num<1" class="quick-submit" style="height:32px;margin: 0;font-size:0.65rem;line-height:32px" href="javascript:;" ng-click="plusup(pagedata.g.id,pagedata.g,$index);pagedata.allnum=pagedata.allnum+1;up.num=up.num+1;up.pprice=up.price">加入购物车</div>
										<div ng-show="up.num>0"class="quick-submit" style="height:32px;margin: 0;font-size:0.8rem;line-height:32px;">
											<div class="quick-num open" style="margin-top:4px">
												<div ng-click="minusup(pagedata.g.id,pagedata.g,$index);pagedata.allnum=pagedata.allnum - 1;up.num=up.num - 1;up.pprice=up.price*up.num" class="minus fa fa-minus" style="background: none; color: #fff; border: 1px solid #fff;font-size: 16px;"></div>
												<div class="num" style="color:#fff">{{up.num}}</div>
												<div ng-click="plusup(pagedata.g.id,pagedata.g,$index);pagedata.allnum=pagedata.allnum + 1;up.num=1+up.num;up.pprice=up.price*up.num" class="plus fa fa-plus" style="background: none;border: 1px solid #fff;font-size: 16px;"></div>
											</div>
										</div>
								</div>
								</div>
								</div>
								<div class="clear"></div>
						</div>
					</div>
	</div>
<script type="text/javascript">
scope.pagedata.selected = 0;  //状态标记
scope.pagedata.post.user_num = 2;
scope.pagedata.orderprice += scope.pagedata.in_pay*2
var usernums=[];
for($i = 1;$i<21;$i++){
	usernums[$i] = $i;
}
scope.pagedata.usernums =usernums;
scope.minsuser_num = function(){
	scope.pagedata.post.user_num -= 1;
	scope.pagedata.orderprice -= parseInt(scope.pagedata.in_pay)
}
scope.plususer_num = function(){
	scope.pagedata.post.user_num += 1;
	scope.pagedata.orderprice += parseInt(scope.pagedata.in_pay)
}
scope.minusup2 = function(goodsid,g,packageid){
		g.num =  parseInt(g.num) - 1;
		if(packageid < 0){
			scope.pagedata.allprice -= parseInt(g.goodsprice);
		}else{
			scope.pagedata.allprice -= parseInt(g.package[packageid].price);
		}
		scope.pagedata.orderprice = scope.pagedata.allprice + scope.pagedata.in_pay*scope.pagedata.post.user_num;
		goodsid = goodsid ? goodsid : g.id;
		var params = {
					'plugin':'jy_dish',
					'action':'s_posgoods',
					'op':'diancai',
					'query':'goodid='+goodsid+'&num='+g.num+'&packageid='+packageid,
					'data':{},
					'callback':function(data){
							console.log(data)
							if(data.error != 0){
								scope.$apply(function(){
									scope.pagedata.carts = data.carts;
								});
							}
					}
		}
		scope.post_json(params);
}
scope.plusup2 = function(goodsid,g,packageid){
		g.num =  parseInt(g.num) + 1;
		console.log(g.num)
		if(packageid < 0){
			scope.pagedata.allprice += parseInt(g.goodsprice);
		}else{
			scope.pagedata.allprice += parseInt(g.package[packageid].price);
		}
		goodsid = goodsid ? goodsid : g.id;
		scope.pagedata.orderprice = scope.pagedata.allprice + scope.pagedata.in_pay*scope.pagedata.post.user_num;
		console.log(g);
		var params = {
					'plugin':'jy_dish',
					'action':'s_posgoods',
					'op':'diancai',
					'query':'goodid='+goodsid+'&num='+g.num+'&packageid='+packageid+'&plus=1',
					'data':{},
					'callback':function(data){
							console.log(data)
							if(data.error != 0){
								scope.$apply(function(){
									scope.pagedata.carts = data.carts;
								});
							}
					}
		}
		scope.post_json(params);
}
scope.minusup = function(goodsid,g,packageid){
		g.cartnum =  parseInt(g.cartnum) - 1;
		console.log(g.cartnum)
		console.log(g);
		if(packageid < 0){
			scope.pagedata.allprice -= parseInt(g.goodsprice);
		}else{
			scope.pagedata.allprice -= parseInt(g.package[packageid].price);
		}
		scope.pagedata.orderprice = scope.pagedata.allprice;
		goodsid = goodsid ? goodsid : g.id;
		var params = {
					'plugin':'jy_dish',
					'action':'s_posgoods',
					'op':'diancai',
					'query':'goodid='+goodsid+'&num='+g.cartnum+'&packageid='+packageid,
					'data':{},
					'callback':function(data){
							console.log(data)
							if(data.error != 0){
								scope.$apply(function(){
									scope.pagedata.carts = data.carts;
								});
							}
					}
		}
		scope.post_json(params);
}
scope.plusup = function(goodsid,g,packageid){
		g.cartnum =  parseInt(g.cartnum) + 1;
		console.log(g.cartnum)
		if(packageid < 0){
			scope.pagedata.allprice += parseInt(g.goodsprice);
		}else{
			scope.pagedata.allprice += parseInt(g.package[packageid].price);
		}
		goodsid = goodsid ? goodsid : g.id;
		scope.pagedata.orderprice = scope.pagedata.allprice + scope.pagedata.in_pay*scope.pagedata.post.user_num;
		console.log(g);
		var params = {
					'plugin':'jy_dish',
					'action':'s_posgoods',
					'op':'diancai',
					'query':'goodid='+goodsid+'&num='+g.cartnum+'&packageid='+packageid+'&plus=1',
					'data':{},
					'callback':function(data){
							console.log(data)
							if(data.error != 0){
								scope.$apply(function(){
									scope.pagedata.carts = data.carts;
								});
							}
					}
		}
		scope.post_json(params);
}
scope.addfoot = function(g,packageid){
		g.cartnum =  parseInt(g.cartnum) + 1;
		if(packageid < 0){
			scope.pagedata.allprice += parseInt(g.price);
		}else{
			scope.pagedata.allprice += parseInt(g.package[packageid].price);
		}
		scope.pagedata.orderprice = scope.pagedata.allprice + scope.pagedata.in_pay*scope.pagedata.post.user_num;
		var params = {
					'plugin':'jy_dish',
					'action':'s_posgoods',
					'op':'diancai',
					'query':'goodid='+g.id+'&num='+g.cartnum+'&packageid='+packageid+'&plus=1',
					'data':{},
					'callback':function(data){
							console.log(data)
							if(data.error != 0){
								scope.$apply(function(){
									scope.pagedata.carts = data.carts;
								});
							}
					}
		}
		scope.post_json(params);
}
scope.unsetcarts = function(){
		scope.pagedata.allprice =0;
		var params = {
					'plugin':'jy_dish',
					'action':'s_posgoods',
					'op':'unsetcarts',
					'data':{},
					'callback':function(data){
							console.log(data)
							if(data.error != 0){
								scope.$apply(function(){
									scope.pagedata.carts = data.carts;
								});
							}
					}
		}
		scope.post_json(params);
}
 $('.plus').on('click', function () {
	var cart = $('.quick-cart');
        var imgtodrag = $(this).parent('.quick-item').find("img").eq(0);
        if (imgtodrag) {
            var imgclone = imgtodrag.clone()
                .offset({
                top: imgtodrag.offset().top,
                left: imgtodrag.offset().left
            })
                .css({
                'opacity': '0.5',
                    'position': 'absolute',
                    'height': '2rem',
                    'width': '2rem',
                    'z-index': '100'
            })
                .appendTo($('body'))
                .animate({
                'top': cart.offset().top + 10,
                    'left': cart.offset().left + 10,
                    'width': 75,
                    'height': 75
            }, 1000, 'easeInOutExpo');
            
            imgclone.animate({
                'width': 0,
                    'height': 0
            }, function () {
                $(this).detach()
            });
        }
});
</script>